<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap5/css/bootstrap.min.css">
    <link rel="stylesheet/less" href="./css/common.less"> <!--公共样式 -->
    <link rel="stylesheet/less" href="./css/blog.less"><!--独立样式-->
    <title>项目文件</title>
</head>

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg">
                <div class="container-fluid">
                    <a class="navbar-brand logoNav" href="#">
                        <img src="./img/Logo.png" alt="Logo" class="d-inline-block align-text-top">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                        <a class="navbar-brand" href="#">
                            <img src="./img/Logo.png" alt="Logo" class="d-inline-block align-text-top">
                        </a>
                        <div class="navbar-nav">
                            <a class="nav-link" href="./index.html">落地页</a>
                            <a class="nav-link" href="./project.html">项目文件</a>
                            <a class="nav-link" href="./blog.html">博客</a>
                            <a class="nav-link" href="./service.html">我们的服务</a>
                            <a class="nav-link" href="./about.html">关于我们</a>
                        </div>
                        <div class="navbar-nav loginNav">
                            <a class="nav-link " id="login" href="./login.html">登录</a>
                            <a class="nav-link " id="register" href="./register.html">注册</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </header>
    <div class="banner">
        <img src="./img/banner2.png" class="w-100 h-100" alt="">
        <div class="banner_text">
            <h1>博客标题示例</h1>
            <p class="d-none d-lg-block">领导一个组织是令人难以置信的回报， 自信和谦逊。 每一次成功都是建立在错误的基础上的。</p>
            <span class="d-none d-sm-block">首页 &gt; 博客</span>
        </div>
    </div>
    <div class="container blog_content">
        <div class="row">
            <nav class="col-md-4 d-none d-lg-block">
                <div class="search">
                    <img src="./img/blog_nav_1.png" alt="">
                    <input type="text" placeholder="输入关键字...">
                </div>
                <ul class="category">
                    <li class="nav_title">博客类别</li>
                    <li class="item">研发技术(15)</li>
                    <li class="item">网站建设(08)</li>
                    <li class="item">网络安全(20)</li>
                    <li class="item">数据库(07)</li>
                </ul>
                <ul class="article">
                    <li class="nav_title">热门文章</li>
                    <li class="item">
                        <div class="left d-none d-xl-block">
                            <img src="./img/blog_nav_2.png" class="w-100 h-100" alt="">
                        </div>
                        <div class="right">
                            <p>不要指望免费赢得客户，这样则会失去更多客户</p>
                            <span class="date">2021-11-22</span>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left d-none d-xl-block">
                            <img src="./img/blog_nav_3.png" class="w-100 h-100" alt="">
                        </div>
                        <div class="right">
                            <p>您的团队如何搭建网站重要的架构桥梁</p>
                            <span class="date">2021-11-22</span>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left d-none d-xl-block">
                            <img src="./img/blog_nav_4.png" class="w-100 h-100" alt="">
                        </div>
                        <div class="right">
                            <p>您的团队如何搭建网站重要的架构桥梁</p>
                            <span class="date">2021-11-22</span>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left d-none d-xl-block">
                            <img src="./img/blog_nav_5.png" class="w-100 h-100" alt="">
                        </div>
                        <div class="right">
                            <p>您的团队如何搭建网站重要的架构桥梁</p>
                            <span class="date">2021-11-22</span>
                        </div>
                    </li>
                </ul>
                <div class="label">
                    <div class="nav_title">热门标签</div>
                    <div class="box">
                        <div class="item">标签滑过示例</div>
                        <div class="item">黑客技术</div>
                        <div class="item">区块链内容</div>
                        <div class="item">新闻榜</div>
                        <div class="item">忘记密码设置</div>
                        <div class="item">安全状态设置</div>
                        </li>
                        <div class="item">安全支持</div>
                        </li>
                        <div class="item">服务</div>
                        </li>
                    </div>
                </div>
            </nav>
            <section class="col-lg-8 col-12 mx-auto">
                <div class="row">
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_1.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_2.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_3.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_4.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_5.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="item col-md-6 col-10 mx-auto">
                        <div class="item_box">
                            <img src="./img/blog_section_6.png" alt="" class="w-100">
                            <div class="text_box">
                                <div class="top">
                                    <div class="left">
                                        <img src="./img/blog_section_icon1.png" alt="">
                                        管理员
                                    </div>
                                    <div class="right">
                                        <img src="./img/blog_section_icon2.png" alt="">
                                        2021-11-22
                                    </div>
                                </div>
                                <div class="title">人类可读的JavaScript：如何编译和运行你的第一个Java 程序</div>
                                <p>用户现在几乎不可能在不通过虚假社交媒体帐户，遇到主要故事选举的情况下阅读新闻知识相关的内容集合体，在接触的项目都需要国际化…</p>
                                <div class="bottom">查看详情 —</div>
                            </div>
                        </div>
                    </div>
                    <div class="pager col-12  d-flex justify-content-center justify-content-lg-start">
                        <div class="item"><span>&lt;</span></div>
                        <div class="item"><span>1</span></div>
                        <div class="item"><span>2</span></div>
                        <div class="item"><span>3</span></div>
                        <div class="item"><span>&gt;</span></div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <div class="container">
        <div class="row input_email">
            <div class="left col-lg-7 col-12 px-5 ps-lg-5 mx-auto">
                <h1>文字标题示例信息可显示两行产品适用于所有设备。</h1>
                <p>适用所有设备介绍文字示例信息，加入我们文字标题示例信息可显示两行加入我们由世界领先组织的社区。</p>
            </div>
            <div class="right col-lg-5 mx-auto d-none d-lg-flex">
                <div class="pic row">
                    <img class="col-md-5" src="./img/blog_input_email_1.png" alt="">
                    <img class="col-md-5" src="./img/blog_input_email_2.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0 left">
                    <img src="./img/Logo_index.png" alt="">
                    <p>公司信息文字示例最多显示显示，当我们回顾2020，我们看到了什么？在一探究竟的执拗中挑战科学极限，以寸步不让的果敢打造科技力量，用天马星空创造共享。</p>
                    <img src="./img/footer1.png" alt="">
                </div>
                <div class="col-lg-2 col-sm-6 col-10 mx-auto text-center text-sm-start  mb-4  mb-lg-0">
                    <div class="title">服务</div>
                    <div class="item">文字示例信息</div>
                    <div class="item">安全托管</div>
                    <div class="item">检查网站网址</div>
                    <div class="item">安全密码设置</div>
                </div>
                <div class="col-lg-2 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0">
                    <div class="title">关于我们</div>
                    <div class="item">付款计划</div>
                    <div class="item">让储蓄更多</div>
                    <div class="item">税收计算器</div>
                    <div class="item">关于我们</div>
                </div>
                <div class="col-lg-3 col-sm-6 col-10 mx-auto text-center text-sm-start mb-4 mb-lg-0">
                    <div class="title">联系我们</div>
                    <div class="item">地址示例最多显示两行可折行北京市海淀区中关村</div>
                    <div class="item">电话：010-57500000</div>
                    <div class="pic">
                        <img src="./img/footer2.png" alt="">
                        <img src="./img/footer3.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="end">
            © 2021 copyright All Rights Reserved.demo
        </div>
    </footer>
    <script src="./js/less-4.1.3.js"></script>
    <script src="./bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>